<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript" language="javascript" src="js/jquery-1.4.2.min.js"></script>
		<title>无标题文档</title>
<style type="text/css">
body {
	margin: 0;
	padding: 40px;
	background: #fff;
	font: 80% Arial, Helvetica, sans-serif;
	color: #555;
	line-height: 180%;
}

img {
	border: none;
}

ul,li {
	margin: 0;
	padding: 0;
}

li {
	list-style: none;
	float: left;
	display: inline;
	margin-right: 10px;
	border: 1px solid #AAAAAA;
}

/* tooltip */
#tooltip {
	position: absolute;
	border: 1px solid #ccc;
	background: #333;
	padding: 2px;
	display: none;
	color: #fff;
}
</style>
		<script language="javascript" src="jquery1.4.min.js"></script>
		<script language="javascript">
	$(function() {
		var $title = "";
		var $x = 10;
		var $y = 20;
		$(".tooltip").mouseover(function(e) {
			//鼠标悬停							
				$title = this.title;
				this.title = "";
				var $tooltip = "<div id='tooltip'><img src='" + this.href
						+ "' /><br/>" + $title + "</div>";
				$("body").append($tooltip); //将tooltip添加到body里
				$("#tooltip").css( {
					top : (e.pageY + $y) + "px",
					left : (e.pageX + $x) + "px"
				}).show("fast");
			}).mouseout(function() {
			//鼠标移出
				this.title = $title;
				$("#tooltip").remove();
			}).mousemove(function(e) {
			//鼠标移动
				$("#tooltip").css( {
					top : (e.pageY + $y) + "px",
					left : (e.pageX + $x) + "px"
				})
			})
	})
</script>
	</head>

	<body>
		<h3>
			有效果：
		</h3>
		<ul>

			<li>
				<a href="images/logo.jpg" class="tooltip" title="苹果 iPod nano">
					<img
						style="margin: 0px; padding-top: 10px; position: relative; zoom: 1; width: 50px; hight: 50px;"
						src="images/logo.jpg" alt="苹果 iPod nano" />
				</a>
			</li>
			<li>
				<a href="images/apple_3_bigger.jpg" class="tooltip"
					title="苹果 iPhone"> <img
						style="margin: 0px; padding-top: 10px; position: relative; zoom: 1; width: 50px; hight: 50px;"
						src="images/apple_3_bigger.jpg" alt="苹果 iPhone" />
				</a>
			</li>
			<li>
				<a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac">
					<img
						style="margin: 0px; padding-top: 10px; position: relative; zoom: 1; width: 50px; hight: 50px;"
						src="images/apple_4_bigger.jpg" alt="苹果 Mac" />
				</a>
			</li>
		</ul>



	</body>
</html>
